<template>
<div class="shangpin">
  <div class="img">
       <img src='home/img.png'/>
      </div>
      <div class="zk">
          <div class="left">
              <div class="fresh">
                  <span>￥438.00</span>
                  <span>折扣</span>
              </div>
              <div class="old">
                  <span>价格</span>
                  <span>￥628.00</span>
              </div>
          </div>
          <div class="right">
              <p>距离结束仅剩<span>3</span>天</p>
              <span>12</span>: <span>58</span> : <span>12</span>
          </div>
      </div>
        <div class="title">
            <p>【保质期2021年7月】美国原装进口天衡宝 抗敏鸭薯无谷配方成犬粮26磅/袋</p>
            <p>中国B2C平台战略合作伙伴 无谷天然粮 告别敏感泪痕烦恼 肥胖...</p>
        </div>
        <div class="shui">
            <span>税费：</span>
            <span class="hua">￥39.56</span>
            <span>保税FAQ</span>
        </div>
        <div class="shezhi">
            <div class="xuanze">
                <span class="xx">选择：</span>
                <span>规格</span>
                <span>4.5榜</span>
            </div>
            <div class="fuwu">
                <span class="xx">服务：</span>
                <span>育宠指导 9.9包邮 24H解决 7天退货 超时赔付 </span>
            </div>
        </div>
        
        <div class="dianpu">
            <img src="xiangqing/dp.jpg"/>
            <div class="p">
                <p>天衡宝Natural Balance</p>
                <p>终身所享 无需换粮</p>
            </div>
            <button> +关注 </button>
            

        </div>
        <div class="dianpuxiangqing">
                <div class="quanbushangpin">
                    <span>10</span>
                    <p>全部商品</p>
                </div>
                <div class="guanzhurenshu">
                    <span>12990</span>
                    <p>关注人数</p>
                </div>
                <div class="pinpaidongtai">
                    <span>0</span>
                    <p>品牌动态</p>
                </div>
            </div>
        <div class="tuwenxq">
            <p>图文详情></p>

        </div>
        <div class="dingwei">
            <!-- <p>前往E宠app查看精致养宠好物品质养宠，尽在E宠</p> -->
            <!-- <button>打开APP</button> -->
        </div>
<!-- 
        <div class="bottombar">
            <span>收藏</span>
            <span>购物车</span>
           <button>加入购物车</button>
        </div> -->
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
    .shangpin{
        width: 100%;
       background-color: #f3f4f5;
        .img{
            width: 100%;
            height:3.75rem ;
            img{
                width: 100%;
                height: 3.75rem;
            }
        }
        .zk{
            width: 100%;
            height:.7rem ;
            .left{
                width: 70%;
                height: 100%;
                padding: .1rem;
               background-image: url(../../../public/xiangqing/bg.png);
                padding-left: .1rem;
                float: left;
                .fresh{
                    
                    padding-top: .1rem;
                    color: white;
                    font-size: .12rem;
                    line-height: .13rem;
                    margin-bottom: .02rem;
                    span:nth-child(1){
                        color: rgb(230, 182, 134);
                        line-height: .15rem;
                        font-weight: 700;
                        font-size: .16rem;
                        margin-right: .1rem;
                    }
                }
                .old{
                    font-size: .13rem;
                    color: white;

                    span:nth-child(2){
                        text-decoration: line-through;
                    }
                }
            }
            .right{
                font-size: .12rem;
                color: #333;
                float: right;
                width: 30%;
                padding-top: .1rem;
            
                line-height: .15rem;
                height: 100%;
                padding: .1rem;
               background-image: url(../../../public/xiangqing/bg2.png);
                
            }
        }
        .title{
            width: 100%;
            background-color: #fff;
            color: red;
            padding: .1rem;
            font-size: .12rem;
            margin-bottom: .1rem;
            p:nth-child(1){
                color: #333;
                line-height: .15rem;
            }
        }
        .shezhi{
            width: 100%;
            background-color: #fff;
            padding-left: .1rem;
            margin-bottom: .2rem;
            .xuanze,.fuwu{
                width: 100%;
                height: .4rem;
                line-height: .4rem;
                font-size: .12rem;
            }
            
            .xx{
                font-size: .12rem;
                 -webkit-transform:scale(0.8);
                 color: #ccc;
                //  display:block;
            }
        }
        .shui{
            width: 100%;
            height: .4rem;
            line-height: .4rem;
            font-size: .12rem;
            background-color: #fff;
            margin-bottom: .2rem;
            padding-left: .1rem;
            span:nth-child(2){
                margin: 0 .1rem;
            }
        }

        .hua{
            text-decoration: line-through;
        }
        .dianpu{
            width: 100%;
            padding: .1rem;
            display: flex;
            background-color: #fff;
            // justify-content: space-between;
            img{
                width: .9125rem;
                height: .3934rem;
                
            }
            .p{
                // float: left;
                width: 1.5rem;
                height: .4rem;
                margin-left: .1rem;
                p{
                    height:.2rem ;
                    line-height: .2rem;
                    font-size: .14rem;
                    width: 100%;
                    margin-bottom: 0.03rem;
                }
                
            }
            button{
                // margin-top: .15rem;
                    border: 1px solid red;
                    color: red;
                    width:.53rem ;
                    height: .2rem;
                    line-height: .2rem;
                    text-align: center;
                    display: block;
                    border-radius: 3px;
                    // float: right;
                    margin: .1rem .1rem 0rem .4rem;
                    // margin-right: .1rem;
                }
        }
        .dianpuxiangqing{
            background-color: #fff;
            display: flex;
            // justify-content: start;
            width: 100%;
            // height:.4rem ;
            .quanbushangpin,.guanzhurenshu,.pinpaidongtai{
               flex: 1;
               text-align: center;
               color: #999;
               font-size: .14rem;
                border-right: 1px solid #ccc;     
            }
          
        }
        .tuwenxq{
            width: 100%;
            height: .4rem;
            background-color: #fff;
            p{
                line-height: .4rem;
                height: .4rem;
                text-align: center;
            }
        }
    }
</style>